<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true" style="margin-left: 25px;">
                    <el-form-item label="仪器名称" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 220px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="设备种类" prop="kind">
                        <el-select v-model="queryParams.kind" placeholder="请选择" clearable style="width: 220px">
                            <el-option label="电梯检测仪器" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 0px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList"
                    style="margin-top: 30px;margin-left: 10px;margin-right: 10px;width: calc(100% - 20px);">
                    <el-table-column type="index" width="50" label="序号" fixed="left" />
                    <el-table-column label="设备种类" align="center" prop="className" width="160px" />
                    <el-table-column label="仪器名称" align="center" prop="name" width="160px" />
                    <el-table-column label="仪器型号" align="center" prop="modelName" width="160px" />
                    <el-table-column label="采购时间" align="center" prop="procureDate" width="160px">
                        <template #default="scope">
                            {{ parseTime(scope.row.procureDate || '') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="入库时间" align="center" prop="warehousingDate" width="160px">
                        <template #default="scope">
                            {{ parseTime(scope.row.warehousingDate || '') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="有效期至" align="center" prop="effectiveDate" width="160px">
                        <template #default="scope">
                            {{ parseTime(scope.row.effectiveDate || '') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="检定或校准机构" align="center" prop="verificationAgencyName" width="160px" />
                    <el-table-column label="供应商" align="center" prop="supplierName" width="160px" />
                    <el-table-column label="数量" align="center" prop="amount" width="160px" />
                    <el-table-column label="经办人" align="center" prop="handlerName" width="160px" />
                    <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width"
                        width="160px">
                        <template #default="scope">
                            <el-button link type="primary" @click="handleDetails(scope.row)">查看</el-button>
                            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button link type="danger" @click="handleDel(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>

        <el-dialog v-model="dialogVisible" draggable title="监测仪器信息" width="1000px">
            <el-form label-width="140px" :disabled="!isCanEdit">
                <div class="flex-v">
                    <el-form-item label="设备种类" prop="className">
                        <el-input v-model="dialogInfo.className" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="供应商" prop="supplierName" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.supplierName" style="width: 300px" maxlength="100" />
                    </el-form-item>
                </div>
                <div class="flex-v">
                    <el-form-item label="仪器名称" prop="name" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.name" style="width: 300px" maxlength="100" />
                    </el-form-item>
                    <el-form-item label="采购时间" prop="procureDate" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.procureDate" style="width: 300px" maxlength="20" />
                    </el-form-item>
                </div>
                <div class="flex-v">
                    <el-form-item label="仪器型号" prop="modelName" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.modelName" style="width: 300px" maxlength="100" />
                    </el-form-item>
                    <el-form-item label="入库时间" prop="warehousingDate" style="margin-left: 0px;">
                        <el-date-picker v-model="dialogInfo.warehousingDate" value-format="YYYY-MM-DD"
                            type="date"></el-date-picker>
                    </el-form-item>
                </div>
                <div class="flex-v">
                    <el-form-item label="检定或校准机构" prop="verificationAgencyName" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.verificationAgencyName" style="width: 300px" maxlength="100" />
                    </el-form-item>
                    <el-form-item label="有效期至" prop="effectiveDate" style="margin-left: 0px;">
                        <el-date-picker v-model="dialogInfo.effectiveDate" value-format="YYYY-MM-DD"
                            type="date"></el-date-picker>
                    </el-form-item>
                </div>
                <div class="flex-v">
                    <el-form-item label="经办人" prop="handlerName" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.handlerName" style="width: 300px" maxlength="100" />
                    </el-form-item>
                    <el-form-item label="数量" prop="amount" style="margin-left: 0px;">
                        <el-input v-model="dialogInfo.amount" style="width: 300px" maxlength="20" />
                    </el-form-item>
                </div>

                <div v-if="dialogInfo.parametersRequestList && dialogInfo.parametersRequestList.length > 0"
                    class="dialog-item-title">参数设置</div>

                <div class="flex-v dialog-item" v-for="(item, idx) in dialogInfo.parametersRequestList" :key="idx">
                    <el-form-item label="参数名称" style="margin-left: 0px;">
                        <el-input v-model="item.name" style="width: 300px" maxlength="100" />
                    </el-form-item>
                    <el-form-item label="参数值" style="margin-left: 0px;">
                        <el-input v-model="item.content" style="width: 300px" maxlength="20" />
                    </el-form-item>
                    <div v-if="isCanEdit" class="item-del-ic" @click="delItem(idx)">
                        <el-icon size="20px" color='red'>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                </div>
                <div v-if="isCanEdit" class="flex-vhc" style="margin-top: 20px">
                    <el-button type="primary" icon="Plus" @click="addNewItem">新增参数项</el-button>
                </div>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEdit">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
 
<script setup name="User">
import {
    apiGetInstrumentationList,
    apiGetInstrumentationDetails,
    apiDelInstrumentation
} from "@/api/instrumentation";

const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const total = ref(0);
const dialogInfo = ref({
    parametersRequestList: []
})
const dialogVisible = ref(false)
const isCanEdit = ref(false)

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    rules: {
    },
});

const { queryParams, form } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    apiGetInstrumentationList(queryParams.value).then(res => {
        loading.value = false;
        if (res.data) {
            detectionList.value = res.data.records;
            total.value = res.data.total;
        } else {
            detectionList.value = [];
            total.value = 0;
        }
    }).catch(err => {
        loading.value = false;
        detectionList.value = [];
        total.value = 0;
    });
};

getList();

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
};

const handleAdd = () => {
    dialogInfo.value = {}
    isCanEdit.value = true
    dialogVisible.value = true
}

const handleLook = (row) => {
    dialogInfo.value = row
    isCanEdit.value = false
    dialogVisible.value = true
}

const handleEdit = (row) => {
    dialogInfo.value = row
    isCanEdit.value = true
    dialogVisible.value = true
};

//详情
const handleDetails = (row) => {
    loading.value = true;
    apiGetInstrumentationDetails(row.id).then(res => {
        loading.value = false;
        if (res.data) {
            dialogInfo.value = res.data
            isCanEdit.value = false
            dialogVisible.value = true
        }
    }).catch(err => {
        loading.value = false;
    });

};

const submitEdit = (row) => {
    proxy.$modal.msgSuccess("操作成功");
};

const handleDel = (row) => {
    proxy.$modal.confirm('是否确认删除该数据项？').then(function () {
        return apiDelInstrumentation([row.id]);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("操作成功");
    }).catch(() => { });
};

const addNewItem = () => {
    if (!dialogInfo.value.parametersRequestList) {
        dialogInfo.value.parametersRequestList = []
    }
    dialogInfo.value.parametersRequestList.push({})
}

const delItem = (idx) => {
    let arr = dialogInfo.value.parametersRequestList
    if (arr && arr.length > 0 && arr.length > idx) {
        arr.splice(idx, 1)
    }
}

</script>
 

<style lang="scss" scoped>
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px #ddd solid;
}

.dialog-item {
    margin-top: 20px;

    .item-del-ic {
        margin-left: 10px;
        margin-top: -8px;
        cursor: pointer;
    }
}

.now-select-txt {
    font-size: 15px;
    color: #fff;
    background: #00BFFF;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;

    span {
        font-size: 20px;
        font-weight: bold;
        margin: 0 10px;
    }

    div {
        cursor: pointer;
        margin-left: 30px;
        font-weight: bold;
    }
}
</style>
 